<template>
<div class="hello">
  <!-- 初始化echarts 需要个有宽高的盒子 -->
  <div ref="mapbox" class="box">
  </div>
</div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/map/js/china.js'
import jsonp from 'jsonp'

const option = {
  title: {
    text: '疫情地图', // 主标题
    line: '', // 链接
    subtext: '', // 副标题
    sublink: '',
  },
  series: [{ // 图表类型
    name: '确诊人数', //对应的是鼠标触摸后的内容 
    type: 'map', //告诉echarts 渲染地图
    map: 'china',
    label: {
      show: true, //显示各个省份名称
      fontSize: 8,
    },
    itemStyle: {
      areaColor: '#fff' //区域的背景颜色
    },
    emphasis: {
      //控制鼠标滑过时的高亮样式
      itemStyle: {
        areaColor: '#c7fffd'
      }
    },
    roam: true, // 鼠标滚轮控制地图放大缩小，可拖拽
    zoom: 1.2, //控制地图的大小
  }],
  visualMap: [{ // 视觉映射组件
    type: 'piecewise',
    show: true,
    splitNumber: 6, // 分成几条
    pieces: [{ // 手动分几条
        min: 10000
      }, // 不指定 max，表示 max 为无限大（Infinity）。
      {
        min: 1000,
        max: 9999
      },
      {
        min: 100,
        max: 999
      },
      {
        min: 10,
        max: 99
      },
      {
        min: 1,
        max: 9
      },
      {
        min: 0,
        max: 0
      }
    ],
    //align:'right' // 默认是left
    inRange: { // 地图颜色
      symbol: 'rect', // 图元的图形类别 图标的形状，还可以设置circle
      color: ['#fff', '#ffaa85', '#ff7b69', '#cc2929', '#8c0d0d', '#660208']
    },
    itemHeight: 10,
    itemWidth: 20
  }],
  tooltip: { // 鼠标触摸显示
    trigger: 'item'
    // position: function (pos, params, dom, rect, size) {
    //       // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
    //       var obj = {top: 60};
    //       obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
    //       return obj;
    //   }
  },
  toolbox: { // 可下载地图
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      dataView: { // 数据视图
        readOnly: false
      },
      restore: {}, // 刷新
      saveAsImage: {} // 保存图片
    }
  },
};
export default {
  name: 'Map',
  mounted() {
    this.getData();
    this.mychart = echarts.init(this.$refs.mapbox); //获取mapbox盒子
    this.mychart.setOption(option);
  },
  methods: {
    getData() {
      // 项目中用到的疫情实时动态接口数据来源新浪
      jsonp(
        'http://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427', {}, (erros, data) => {
          console.log(data);
          console.log(data.data.list)
          var lists = data.data.list.map(item => {
            return {
              name: item.name,
              value: item.value
            }
          })
          console.log(lists)
          option.series[0].data = lists;
          this.mychart.setOption(option); // 执行的前提是demo已经渲染完成，只有demo渲染完成才能够执行echarts初始化
        })
    }
  }
}
</script>

<style scoped>
.box {
  width: 750px;
  height: 650px;
  margin: auto;
  /* border: 2px solid aquamarine; */
}
</style>
